<template>
  <div id="student-view">
    <el-row>
      <el-col>
        <el-avatar
          shape="square"
          :size="150"
          :src="
            userInfo.studentAvatar ||
            'http://q4.qlogo.cn/headimg_dl?dst_uin=2857734156&spec=100'
          "
        ></el-avatar>
      </el-col>
    </el-row>
    <el-row style="overflow-x: scroll">
      <el-descriptions title="关于我" direction="vertical" :column="4" border>
        <el-descriptions-item
          :label="user.role == 'student' ? '学号' : '工号'"
        >
          {{ user.studentNo || user.studentNo || user.deanNo }}
        </el-descriptions-item>
        <el-descriptions-item
          label="身份证号"
          >此字段数据库未设置</el-descriptions-item
        >
        <el-descriptions-item label="全名" :span="2">{{
          user.studentName || user.teacherName || user.deanName || user.name
        }}</el-descriptions-item>
        <el-descriptions-item
          label="学院"
          >{{ user.department[0].departmentName }}</el-descriptions-item
        >
        <el-descriptions-item
          label="电话"
          >{{ user.studentPhone || user.techerPhone }}</el-descriptions-item
        >
        <el-descriptions-item
          label="邮箱"
          >{{ user.studentEmail || user.teacherEmail }}</el-descriptions-item
        >
        <el-descriptions-item
          label="性别"
        >
          {{ (user.studentSex || user.teacherSex) | filterSex }}
        </el-descriptions-item>
        <el-descriptions-item
         
          label="出生日期"
        >{{ user.studentBirthday || user.teacherBirthday | filterDate }}</el-descriptions-item>
        <el-descriptions-item label="联系地址"
       
          >{{ user.studentNowAddress || user.teacherNowAddress }}</el-descriptions-item
        >
      </el-descriptions>
    </el-row>
    <el-row>
      <el-col>
        <p style="color: #333"><b> 个人介绍</b></p>
        <p class="desc">
          {{user.studentRecommend || user.teacherRecommend}}
        </p>
      </el-col>
    </el-row>
    <el-row>
      <el-col >
        <p style="color: #333">永久居住地址：</p>
        <p class="desc"> {{ user.studentHomeAddress || user.teacherHomeAddress }} </p>
      </el-col>
    </el-row>
    <el-row>
      <el-col >
        <p style="color: #333">现居住地址：</p>
        <p class="desc"> {{ user.studentNowAddress || user.teacherNowAddress }} </p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";

import { useGetStudent } from "@/hooks/student";

export default {
  name: "StudentView",
  data() {
    return {
      user: {},
    };
  },
  mounted() {
    (async () => {
      this.user = (await useGetStudent(this.userInfo._id)).data?.student[0];
    })();
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  methods: {},
  filters: {
    filterSex(v) {
      return v === 0 ? "男" : "女";
    },
    filterDate(v){
      return new Date(v).toLocaleDateString()
    }
  },
};
</script>

<style lang="scss" scoped></style>
